<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*长度单位：像素px*/
			.pxpx{width:100px;
			     height:200px;
				 background-color:red;}
				 
			.baifenbi{width:50%;
			      height:50%;
			      background-color:yellow;}
			/*百分比%：设置百分比，根据父元素样式计算，父元素变化子元素也会变化
			 创建自适应界面时经常使用*/ 
			 
			.emem{font-size:50px;
			      width:1em;
			      height:2em;
			      background-color:blue;}  
			/*em:em和百分比类似，它是相对于当前元素的字体大小来计算
			 1em=1 font-size
			 设置em后，字体大小发生改变时，em也会随之改变
			 设置字体相关打的样式经常使用em*/          	 
		</style>
	</head>
	<body>
		<div class="pxpx">
			<div class="baifenbi"></div>
		</div><br />
		<div class="pxpx">
			<div class="emem">0000</div>
		</div>
	</body>
</html>
